<template>
    <div class="on">
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>公司管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="margin-top: 10px;">
        <el-select v-model="value" filterable placeholder="根据公司类型选择" @change="searchCompanyByPositionType" clearable>
            <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.typeName"
                    :value="item.id"
                    >
            </el-option>
        </el-select>
        <el-input class="keyword"
                  placeholder="请输入公司相关内容"
                  v-model="input"
                  clearable>
        </el-input>
        <el-button type="primary" icon="el-icon-search" style="margin-left: 5px;" @click="searchKeyword">搜索</el-button>
    </div>

        <el-table
                :data="tableData"
                border
                style="width:1200px;margin-top: 10px;"
                >
            <el-table-column
                    fixed
                    prop="id"
                    label="序号"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="positionType.typeName"
                    label="企业行业类型"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="province.provName"
                    label="省份"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="city.cityName"
                    label="城市"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="district.districtName"
                    label="行政区"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址"
                    width="300">
            </el-table-column>
<!--            <el-table-column-->
<!--                    prop="companyLogo"-->
<!--                    label="公司logo"-->
<!--                    width="120">-->
<!--                <template scope="scope">-->
<!--                    <img :src="baseURL+'uploadImages/'+scope.row.companyLogo" width="100px"/>-->
<!--                </template>-->
<!--            </el-table-column>-->
            <el-table-column
                    prop="email"
                    label="电子邮箱"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="postcode"
                    label="邮编"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="联系电话"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="contactPerson"
                    label="联系人"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="enrollTime"
                    label="企业注册时间"
                    width="300"
                    sortable>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="50">
                <template slot-scope="scope">
<!--                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>-->
<!--                    <el-button type="text" size="small">编辑</el-button>-->
<!--                    <el-button type="primary" icon="el-icon-edit" circle size="mini"></el-button>-->
                    <el-button type="danger" icon="el-icon-close" circle size="mini" @click="dialogOn(scope.row.id)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
                title="确认操作"
                :visible.sync="dialogVisible"
                width="30%"
                >
            <span><i class="el-icon-warning" style="color:dodgerblue;width: 20px;font-size: 20px;"></i>&nbsp;&nbsp;您确定要封禁该公司吗？</span>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="updateCompanyEnable">确 定</el-button>
                </span>
        </el-dialog>
        <el-pagination
                background
                layout="prev, pager, next"
                :page-size="pageInfo.pageSize"
                :total="pageInfo.total"
                @current-change="handlePageChange"
        >
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "companyList",
        data() {
            return {
                //搜索关键字数据
                input: '',
                //公司列表数据
                tableData: [],
                multipleSelection: [],
                //公司类型下拉列表框数据
                options: [],
                value:'',
                pageNum:1,
                pageInfo:{},
                dialogVisible:false,
                updateCompanyId:0
            }
        },
        created(){
            this.getAllCompny();
            this.getAllPositionType();
        },
        methods: {
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            getAllCompny() {
                this.$axios.get("manage/companyList", {
                    params: {
                        pageNum: this.pageNum,
                        positionTypeId: this.value,
                        keyword: this.input
                    }
                })
                    .then(response => {
                        console.log(response.data);
                        this.pageInfo = response.data.data;
                        this.tableData = this.pageInfo.list;
                    })
            },
            handlePageChange(pageNum) {
                this.pageNum = pageNum;
                this.getAllCompny();
            },
            getAllPositionType() {
                this.$axios.get("/manage/getAllPositionType").then(response => {
                    console.log(response.data.data);
                    this.options = response.data.data;
                })
            },
            searchCompanyByPositionType(value) {
                this.value = value;
                this.getAllCompny();
            },
            searchKeyword() {
                this.getAllCompny();
            },
            //弹出对话框
            dialogOn(id) {
                this.dialogVisible = true;
                this.updateCompanyId = id;
            },
            //封禁用户
            updateCompanyEnable() {
                this.$axios.get("/manage/updateCompanyEnableFalseByCompanyId", {params: {companyId: this.updateCompanyId}}).then(response => {
                    this.dialogVisible = false;
                    console.log(response);
                    this.getAllCompny();
                    this.$message({
                        message: response.data.msg,
                        type: 'success'
                    });
                })
            }
        }
    }
</script>

<style scoped>
    .on{
        margin-top: 30px;
        margin-left: 30px;
    }
    .keyword{
        margin-top: 10px;
        margin-left: 684px;
        width: 200px;
    }
</style>